@use "../../../../../../tokens";

.flagWrapper {
  display: flex;
  flex-direction: column;
  gap: tokens.$spacing-lg;
  background-color: tokens.$color-white;
  padding: tokens.$spacing-lg;
  border-radius: tokens.$border-radius-md;
  max-width: tokens.$content-sm;

  &.isActiveOnProd {
    outline: 2px solid tokens.$color-purple-50;
  }
}

.flagName {
  font: tokens.$text-title-3xs;
}

.enabledControl {
  display: flex;
  gap: tokens.$spacing-xs;
  font: tokens.$text-body-lg;
}

.allowListWrapper {
  display: flex;
  flex-direction: column;
  gap: tokens.$spacing-md;

  h4 {
    font: tokens.$text-body-md;
    font-weight: bold;
  }
}

.allowList {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: tokens.$spacing-xs;
  padding: 0;
  list-style-type: none;
}

.addressListing {
  display: flex;
  align-items: center;
  gap: tokens.$spacing-xs;
  font: tokens.$text-body-md;
  font-family: monospace;

  :first-child {
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  button {
    background-color: transparent;
    border: none;
    border-radius: tokens.$border-radius-xl;
    aspect-ratio: 1;
    flex-shrink: 0;

    &:hover {
      cursor: pointer;
      background-color: tokens.$color-red-70;
      color: tokens.$color-white;
    }
  }

  &:has(button:hover) {
    color: tokens.$color-red-70;
  }
}

.addressAdder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  label {
    width: 100%;
  }

  input[type="email"] {
    flex-grow: 1;
    min-width: 0;
  }

  // This rule is more specific than the button:hover in `.addressListing`,
  // but that class doesn't apply to the same elements:
  /* stylelint-disable no-descending-specificity */
  button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    aspect-ratio: 1;
    background-color: transparent;
    color: tokens.$color-blue-50;
    border: none;
    border-radius: tokens.$border-radius-sm;
    padding: tokens.$spacing-sm;

    &:hover {
      cursor: pointer;
      background-color: tokens.$color-blue-50;
      color: tokens.$color-white;
    }
  }
  /* stylelint-enable no-descending-specificity */
}

.editLog {
  color: tokens.$color-grey-50;
  font: tokens.$text-body-sm;
  padding-top: tokens.$spacing-md;
  /* Bottom-align the edit log */
  margin-block-start: auto;

  div {
    display: flex;
    gap: tokens.$spacing-xs;
    justify-content: center;
  }

  dd {
    font-weight: bold;
  }
}
